<template>
  <div class="home">
    <myheader></myheader>
    <myinput></myinput>
    <mylist></mylist>
    <transition name="slide">
      <mymask v-show="$store.state.maskstate"></mymask>
    </transition>
  </div>
</template>

<script>
import myheader from '@/components/myheader'
import mymask from '@/components/mymask'
import myinput from '@/components/myinput'
import mylist from '@/components/mylist'
export default {
  name: "Home",
  components:{
    myheader,
    mymask,
    myinput,
    mylist
  },
  data() {
    return {
      
    };
  },
};
</script>

<style lang="scss" scoped>
.home{
  height: 100%;
  position: relative;
  #mymask{
    position: absolute;
    top: 0;
    left: 0;
  }
  .slide-enter,.slide-leave-to{
    transform: translateX(-100%);
  }
  .slide-enter-to,.slide-leave{
    transform:translateX(0)
  }
  .slide-enter-active,.slide-leave-active{
    transition: transform .5s linear;
  }
}
</style>
